<template>
    <div class="h-[60px] flex justify-center items-center text-white menu-animation"
        :class="isCollapse ? 'text-base' : 'text-xl'">
        <span class="overflow-hidden break-all whitespace-nowrap text-ellipsis">青博管理平台</span>
    </div>
    <el-menu class="el-menu-vertical" @select="handleSelect" :collapse="isCollapse">
        <template v-for="item in menuTree">
            <MenuItem :label="item.label" :children="item.children" :code="item.route">
            </MenuItem>
        </template>
    </el-menu>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import MenuItem from './MenuItem.vue'
import { useRouter } from 'vue-router'
import { getUserInfo } from '@/utils/store';
withDefaults(
    defineProps<{
        isCollapse: boolean
    }>(),
    {
        isCollapse: true
    }
)
const userRole = getUserInfo().roleCode
const router = useRouter()
const menuTree = ref<MenuItemType[]>([
    {
        label: '商品管理',
        route: 'GoodsList',
    },
    {
        label: '订单管理',
        route: 'OrderList',
    },

    {
        label: '资讯管理',
        route: 'ArticleList',
    }
])

onMounted(() => { })
const handleSelect = (index: string) => {
    router.push({ name: index })
}
</script>

<style>
.el-menu-vertical:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.menu-animation {
    transition-property: width;
    transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
    transition-duration: 300ms;
}
</style>
